<template>
  <div class="wrapper">
    <!-- 导航栏 -->

    <div class="header">
      <a-input-group>
        <a-select
          :options="['专家', '动态', '经验', '求助', '优选']"
          v-model="searchProps.type"
          :style="{ width: '100px' }"
          placeholder="类型"
          :allow-clear="true"
        />
      </a-input-group>
      <a-input
        v-model="searchProps.text"
        :style="{ width: '120px' }"
        allow-clear
      >
      </a-input>

      <a-button @click="handlePublish" type="primary">搜索</a-button>
      <a-button
        class="addBox"
        @click="handleAdd"
        type="primary"
        status="success"
        >添加文章</a-button
      >
      <a-button
        class="addBox"
        @click="asdasdasd"
        type="primary"
        status="success"
        >智能推荐</a-button
      >
    </div>

    <div class="body">
      <template v-for="item in commentList">
        <comment :data="item">
          <template #actions>
            <span class="action" key="heart" @click="onLikeChange(item.id)">
              <span>
                <IconHeart />
              </span>
              {{ item.likeNumber }}
            </span>
            <span class="action" key="star" @click="onStarChange">
              <span v-if="star">
                <IconStarFill />
              </span>
              <span v-else>
                <IconStar />
              </span>
              {{ 3 + (star ? 1 : 0) }}
            </span>
            <span class="action" key="reply" @click="handleReply(item.id)">
              <IconMessage />
              回复
            </span>
          </template>
        </comment>
      </template>
    </div>

    <modal title="评论" :visible="modalVisible" :setVisible="setModalVisible">
      <template #default>
        <div class="sub-wrapper">
          <div class="sub-body">
            <template
              v-for="subItem in subCommentList"
              :key="'sub-' + subItem.id"
            >
              <comment :data="subItem"></comment>
            </template>
          </div>
          <div class="sub-footer">
            <a-input v-model="subCommentStr"></a-input>
            <a-button type="primary" @click="handleSubPublish()">
              发送
            </a-button>
          </div>
        </div>
      </template>
    </modal>

    <a-modal
      fullscreen
      width="auto"
      :visible="addActicalM"
      @ok="handleOk"
      @cancel="handleCancel"
      okText="Confirm"
      cancelText="Exit"
      unmountOnClose
    >
      <template #title> 添加文章 </template>
      <div>
        <div class="titileOfAdd">
          <a-select
            :options="['专家', '动态', '经验', '求助', '优选']"
            v-model="addActicalProps.type"
            :style="{ width: '160px' }"
            placeholder="类型"
          />
          <a-input
            class="titileBox"
            v-model="addActicalProps.title"
            :style="{ width: '320px' }"
            placeholder="文章标题"
            allow-clear
          />
        </div>

        <a-textarea
          v-model="addActicalProps.content"
          class="textArea"
          placeholder="文章内容"
          :max-length="5000"
          allow-clear
          show-word-limit
          auto-size
        />
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import comment from "@/components/common/comment/index.vue";
import modal from "@/components/common/modal/index.vue";
import { commonRequest } from "@/utils/request";
import { ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { onMounted } from "vue";
import {
  IconHeart,
  IconMessage,
  IconStar,
  IconStarFill,
  IconHeartFill,
} from "@arco-design/web-vue/es/icon";
import {
  getAllCommentsById,
  getCommunityArticleList,
  publishCommunityArticle,
  replyCommunityArticle,
  addNewArtical,
  likeCommunityArticle,
  tuijianArtical,
} from "@/apis/oldman";

const modalVisible = ref(false);
const commentStr = ref("");
const like = ref(false);
const star = ref(false);
const subCommentStr = ref("");
const userInfo = ref(null);
const commentList = ref([]);
const subCommentList = ref([]);
const subCommentId = ref("");
const activePublishType = ref("");
const activeFilterType = ref("经验"); // TODO： 后面加一个筛选过滤

const setModalVisible = (visible: boolean) => {
  modalVisible.value = visible;
};

const onLikeChange = async (id) => {
  let res = await likeCommunityArticle({ id });
  handlePublish();
  like.value = !like.value;
};
const onStarChange = () => {
  star.value = !star.value;
};

const getSubComments = async (id: string) => {
  const res = await getAllCommentsById({ id: +id });
  console.log("sub", res);
  subCommentList.value = res.data?.data ?? [];
};
// 搜索文章
const searchProps = ref({ text: "", type: "" });
const getComments = async () => {
  const res = await getCommunityArticleList({});
  commentList.value = res.data.data.filter((item) => {
    console.log("iten", searchProps.value);
    if (searchProps.value.text === "" && searchProps.value.type === "") {
      return true;
    } else if (searchProps.value.text === "") {
      return item.type === searchProps.value.type;
    } else if (searchProps.value.type === "") {
      const v = searchProps.value.text?.toLowerCase();
      return item.content?.includes(v) || item.title?.includes(v);
    } else {
      const v = searchProps.value.text?.toLowerCase();
      return (
        item.type === searchProps.value.type &&
        (item.content?.includes(v) || item.title?.includes(v))
      );
    }
  });
};
const handlePublish = async () => {
  getComments();
};

const handleSubPublish = async () => {
  const data = {
    content: subCommentStr.value,
    communityId: +subCommentId.value,
  };

  const res = await replyCommunityArticle(data);

  if (res.data.code === 200) {
    Message.success("评论成功");
    subCommentStr.value = "";
    getSubComments(subCommentId.value);
  }
};

const handleReply = async (id: string) => {
  subCommentId.value = id;
  getSubComments(id);
  setModalVisible(true);
};

//
const asdasdasd = () => {
  tuijianArtical().then((res) => {
    commentList.value = res.data.data;
  });
};

// 添加文章
const addActicalM = ref(false);
const addActicalProps = ref({
  title: "",
  content: "",
  type: "",
});
const handleAdd = () => {
  addActicalM.value = true;
};
const handleOk = () => {
  addActicalM.value = false;
  addNewArtical(addActicalProps.value);
};
const handleCancel = () => {
  addActicalM.value = false;
};

onMounted(() => {
  const userInfoJSON = localStorage.getItem("userInfo");
  userInfo.value = JSON.parse(userInfoJSON);
  getComments();
});
</script>

<style scoped>
.wrapper {
  height: calc(100vh - 80px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.header {
  display: flex;
  gap: 24px;
  padding: 24px;
}

.body {
  margin: 8px 24px;
  overflow-y: auto;
}

.sub-wrapper {
  min-height: 300px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}

.sub-footer {
  display: flex;
  gap: 8px;
}

.action {
  display: inline-block;
  padding: 0 4px;
  color: var(--color-text-1);
  line-height: 24px;
  background: transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.1s ease;
}

.action:hover {
  background: var(--color-fill-3);
}

.addBox {
  margin-left: auto;
  margin-right: 200px;
}

.titileOfAdd {
  display: flex;
  margin-bottom: 10px;
}

.titileBox {
  margin-left: 20px;
}

.textArea {
  min-height: 500px;
  width: 100%;
}
</style>
